<template>
    <div class="oj-main-layout">
      <div class="oj-main-layout-header">
        <div class="oj-main-layout-nav" style="position: relative;">
          <Navbar />
        </div>
      </div>
      <div class="banner-container" v-if="$route.meta.showBanner">
        <img src="@/assets/images/banner.png" class="banner-img">
      </div>
    </div>
    <RouterView />
  </template>
  
  <script setup>
  import Navbar from '@/components/Navbar.vue'
  </script>
  
  <style lang="scss" scoped>
  .el-main {
    padding: 0;
  }
  
  .oj-main-layout {
    // background-color: #f7f7f7;
    padding-top: 0;
  
    .banner-container {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: -45px; // 进一步增加负边距值，从-35px改为-45px
      padding-top: 60px; // 保持内边距与导航栏高度相同
      padding-left: 20px;
      padding-right: 20px;
    }

    .banner-img {
      max-width: 1520px;
      width: 100%;
      border-radius: 16px;
      object-fit: cover;
      height: auto;
    }
  
    .oj-main-layout-header {
      height: 60px;
      position: fixed;
      width: 100%;
      background: #fff;
      left: 0;
      top: 0;
      z-index: 3;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }
  
    .oj-main-layout-nav {
      max-width: 1520px;
      min-width: 100%;
      margin: 0 auto;
      height: 60px;
      background: #fff;
    }
  
    // banner 图
    .oj-ship-banner {
      max-width: 1520px;
      min-width: 1520;
      margin: 0 auto;
      width: 100%;
      height: 100%;
      height: 350px;
      // width: 1677px;
      color: #ffffff;
      background: url("@/assets/index_bg.png") left top no-repeat;
      background-size: cover;
      overflow: hidden;
    }
  }
  </style>